<template>
  <div>
    <md-form ref="form" :mode="formData" :rule="formRule">
      <md-form-group title="基本信息">
        <md-form-item title="宝宝姓名" type="text" v-model="formData.name"></md-form-item>
        <md-form-item title="性别">
          <!-- <input type="radio" name='sex' value="1" />
          <input type="radio" name='sex' value="2" /> -->
          <md-radio-group v-model="formData.sex" :disabled="true">
            <md-radio value="0">女</md-radio>
            <md-radio value="1">男</md-radio>
            <md-radio value="2" disabled>人妖</md-radio>
            <md-radio value="3">未知</md-radio>
          </md-radio-group>

          <!-- <md-radio-group :value="formData.sex" @input="(value) => formData.sex = value">
            <md-radio value="0">女</md-radio>
            <md-radio value="1">男</md-radio>
            <md-radio value="2" disabled>人妖</md-radio>
            <md-radio value="3">未知</md-radio>
          </md-radio-group> -->

          <!-- <md-radio-group :value="formData.sex" @input="(value) => formData.sex = value" disabled>
            <md-radio value="0">女</md-radio>
            <md-radio value="1">男</md-radio>
          </md-radio-group> -->
        </md-form-item>
        <md-form-item title="生日" type="date" v-model="formData.birthday"></md-form-item>
        <md-form-item title="宝爸身高" type="text" v-model="formData.fatherHeight"></md-form-item>
        <md-form-item title="宝爸妈身高" type="text" v-model="formData.motherHeight"></md-form-item>
      </md-form-group>

      <md-form-group title="当前测量">
        <md-form-item title="宝宝当前身高" type="text" v-model="formData.height"></md-form-item>
        <md-form-item title="宝宝当前体重" type="text" v-model="formData.weight"></md-form-item>
        <md-form-item title="宝宝测量日期" type="date" v-model="formData.date"></md-form-item>
      </md-form-group>

      <md-button type="primary" @click="submit">提交</md-button>
    </md-form>

    <md-radio-group value="1">
      <md-radio value="0">游泳</md-radio>
      <md-radio value="1">健身</md-radio>
    </md-radio-group>
    <md-chart />
    <md-scroll-view />
    {{formData.sex}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        name: '',
        sex: 1,
        birthday: '',
        fatherHeight: '',
        motherHeight: '',
        height: '',
        weight: '',
        date: ''
      },
      formRule: {
        name: {
          required: true, message: '姓名不能为空'
        },
        birthday: {
          required: true, message: '生日不能为空'
        },
        fatherHeight: [
          {
            required: true, message: '父亲身高不能为空'
          },
          {
            reg: /\d{1,}/, message: '必须是1为或者多位的数字'
          }
        ]
      }
    }
  },
  created () {
    // setTimeout(() => {
    //   this.formData.sex = 0
    // }, 2000)
  },
  methods: {
    submit () {
      this.$refs.form.validate().then(() => {
        console.log('陈工', this.formData)
      }).catch((error) => {
        // console.log('失败', error)
        // alert(error)
        this.$message.error(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
